---
import "../../global.css";
import "./gallery.css";
import { getSession } from "../../lib/game-saving/account";
import Navbar from "../../components/navbar-main";
import StandardHead from "../../components/standard-head.astro";
import { getGalleryGames } from "../../lib/game-saving/gallery";
import Gallery from "./gallery";

const session = await getSession(Astro.cookies);

const games = getGalleryGames().map(game => ({ ...game, title: game.title.trim(), lowerCaseTitle: game.title.trim().toLowerCase(), lowerCaseAuthor: game.author.toLowerCase() }));

const tags = [
	...new Set(games.reduce<string[]>((p, c) => [...p, ...c.tags], [])),
];
---


<html lang="en">
	<head>
		<StandardHead title="Gallery" />

		<script>
			import { theme, switchTheme } from "../../lib/state";
			const currentTheme = localStorage.getItem("theme") ?? localStorage.getItem("isDark") ?? "light"
			theme.value = currentTheme;	
			
			switchTheme(theme.value);
		</script>
	</head>
	<body>
		<Navbar session={session} />
		<div class="copy-container">
			<h1>Gallery</h1>

			<Gallery client:only="preact" games={games} tags={tags} />			
		</div>
	</body>
</html>
